<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">外勤打卡</view>
		</cu-custom>
		<view :class="['margin-xs radius shadow shadow-lg bg-white' ,BackGroundBox]">
			<form @submit="formSubmit" @reset="formReset">
				<view :style="{marginBottom:100 + 'rpx'}">
					<view class="cu-form-group">
						<view class="title">姓名</view>
						<input type="text" disabled :value="userinfo.lusername" name="LUSERNAME" />
					</view>
					<view class="cu-form-group">
						<view class="title">员工号</view>
						<input type="text" disabled :value="userinfo.lusercode" name="LUSERCODE" />
					</view>
					<view class="cu-form-group">
						<view class="title">补签时间</view>
						<picker mode="date" @change="DateChange" start="1999-09-01" end="2999-09-01" name="LATEDATE" :value="date">
							<view class="picker">
								{{date}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group">
						<view class="title">补签类型</view>
						<input type="text" disabled value="出差打卡" name="LATETYPE" />
					</view>
					<view class="cu-form-group">
						<view class="title">地址</view>
						<input type="text" disabled :value="myaddress" name="ADDRESS" />
					</view>
					<view class="cu-form-group">
						<view class="title">补签原因</view>
						<textarea maxlength="-1" name="LREMARK" placeholder="请输入补签理由"></textarea>
					</view>
					<view class="cu-form-group">
						<view class="title">制单人</view>
						<input type="text" disabled :value="LMAKEOPID" name="LMAKEOPID" />
					</view>
					<view class="cu-form-group">
						<view class="title">制单日期</view>
						<input disabled name="LMAKEOPDATE" type="text" :value="date" />
					</view>
					<view class="cu-form-group">
						<view class="title">上传图片</view>
						<view class="grid col-4 grid-square flex-sub" style="justify-content:flex-end">
							<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
								<image :src="imgList[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
								<text class='cuIcon-cameraadd'></text>
							</view>
						</view>
					</view>
				</view>
				<button-father :Position="'tb-fa-fixed'">
					<button class="cu-btn bg-gradual-blue  lg shadow tb-flex cu-btn-new" form-type="submit">确认</button>
				</button-father>
			</form>
		</view>
	</view>
</template>

<script>
	import ButtonFather from "@/colorui/components/ButtonFather.vue";
	import {
		mapGetters,
	} from "vuex";
	import {
		postinsertbq
	} from "@/service/insert.js"
	export default {
		data() {
			return {
				userinfo: global.userinfo,
				height: this.screenHeight,
				index2: 0,
				myaddress: '',
				addressList: '',
				imgList: [],
				imagename: '',
				date: global.dateright,
				LMAKEOPID: global.userinfo.lusername,
				picker2: [{
					LNAME: '忘记打卡补签'
				}, {
					LNAME: "出差补签"
				}]
			}
		},
		onLoad() {
			// uni.showToast({
			// 	title: '777777'
			// })
			let that = this
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					var point = new plus.maps.Point(res.longitude, res.latitude);
					plus.maps.Map.reverseGeocode(
						point, {},
						function(event) {
							var address = event.address; // 转换后的地理位置
							var point = event.coord; // 转换后的坐标信息
							var coordType = event.coordType; // 转换后的坐标系类型
							that.myaddress = address
							// console.log(address, 'address');
							// var reg = /.+?(省|市|自治区|自治州|县|区)/g;

							// console.log(address.match(reg));
							// that.addressList = address.match(reg).toString().split(",");
							// that.myaddress= that.addressList[1];
							// console.log(that.addressList[0]);
							// console.log(that.addressList[1]);
							// console.log(that.addressList[2]);

						},
						function(e) {}
					);
				}
			});
			// uni.getLocation({
			//     type: 'wgs84',
			// 	// geocode:true,
			//     success: (res) => {
			// 		uni.showToast({
			// 			 title: '888888'
			// 		})
			// 		console.log('当前位置的经度：' + res.longitude);
			// 		uni.showToast({
			// 			 title: res.longitude
			// 		})
			// 		let address = res.address
			// 		this.myaddress = address.district + address.street + address.poiName
			//     }
			// });
		},
		onShow() {},
		onUnload() {},
		components: {
			ButtonFather
		},
		computed: {
			...mapGetters(['Style', 'Font', 'BackGround', 'BackGroundBox'])
		},
		methods: {
			//跳转选择员工页面
			jumpdetail() {
				uni.navigateTo({
					url: '../../personnel/Classassignment/Classassignmentdetail'
				})
			},
			DateChange(e) {
				this.date = e.detail.value
				console.log(this.date);
			},
			PickerChange2(e) {
				this.index2 = e.detail.value
			},
			formSubmit(e) {
				e.detail.value['LUSERNAME'] = this.userinfo.lusername
				e.detail.value['LUSERCODE'] = this.userinfo.lusercode
				e.detail.value['LATETYPE'] = 2
				e.detail.value['lphoto'] = this.imagename
				let model = e.detail.value
				console.log(e.detail.value);
				postinsertbq(model.LUSERCODE, model.LMAKEOPID, model.LREMARK, model.LATEDATE, model.LATETYPE, model.LMAKEOPDATE,
					model.lphoto).then(res => {
						if(res.code == 1) {
							setTimeout(() => {
								uni.navigateBack({
									delta:1
								})
							},800)
							uni.showToast({
								title: '打卡成功',
								icon: 'success',
								duration:2000
							})
						}

				}).catch(err => {
					uni.showToast({
						title: '提交失败',
						icon: 'none'
					})
				})
			},
			// ---------------------------上传图片===================================
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认1
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						this.imgList = res.tempFilePaths
						uni.uploadFile({
							url: uni.getStorageSync('IP') + ':' + uni.getStorageSync('PORT') + '/api/upload',
							filePath: this.imgList[0],
							header: {
								'token': uni.getStorageSync('token')
							},
							name: 'file',
							success: (res) => {
								console.log(JSON.parse(res.data));
								let myres = JSON.parse(res.data)
								console.log(myres.data);
								this.imagename = myres.data
							}
						})
					}
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			// -----------------------------------------------------------
		}
	}
</script>

<style>

</style>
